<template>
  <div class="memory-meter-container demo-spin-col">
    <p class="memory-meter-title">硬盘使用情况</p>
    <div class="memory-meter-box">
      <vue-seamless :data="cpuArrRepeat" :class-option="classOption">
        <div v-for="item of cpuArrRepeat">
          <Meter :titleTxt="item.title" :min="item.min" :max="item.max" :percentage="item.percent"></Meter>
        </div>
      </vue-seamless>
    </div>
    <Spin fix v-if="loadingShow">
      <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
      <div>Loading</div>
    </Spin>
  </div>
</template>
<script>
import Meter from "./meter";
import $ from "jquery";
import VueSeamless from 'vue-seamless-scroll'
export default {
  components: {
    Meter,
    VueSeamless
  },
  props:['hostId','currentItemIndex'],
  created() {
    this.getMaxMin()
    this.getDiskInfo()
    this.timer=setInterval(()=>{
      this.getDiskInfo()
    },60000)
  },
  computed: {
    classOption: function () {
      return {
        step: 0.5,
        limitMoveNum: 6
      }
    }
  },
  destroyed () {
    clearInterval(this.timer);
  },
  data() {
    return {
      cpuArrRepeat:[],
      max:0,
      min:0,
      total:0,
      timer:null,
      loadingShow:true
    };
  },
  methods: {
    getDatas(obj){
      var _this=this;
      var data={
        "jsonrpc": "2.0",
        "method": "item.get",
        "params": {
            "output": "extend",
            "hostids": this.hostId,
            "search": obj,
            "sortfield": "name"
        },
        "auth": localStorage.getItem('auth'),
        "id": localStorage.getItem('currentId')
      }
      return new Promise((resolve,reject)=>{
        _this.$http.post('/zabbix/api_jsonrpc.php',data).then(
          res=>{
            resolve(res.result);
          },
          err=>{
            reject('获取数据失败，请检查网络状况，或稍后刷新页面..')
          }
        )
      })
    },
    async getDiskInfo(){
      var _this=this;
      var res=await this.getDatas({"name":"disk"});
      let total=0;
      _this.cpuArrRepeat=[];
      res.forEach((item,index )=> {
        let str=item.key_.match(/\[\/(\S*),pfree]/);
        if(str!=null){
          _this.cpuArrRepeat=_this.cpuArrRepeat.concat({
            title:str[1],
            percent:Math.round(100-item.lastvalue),
            min:_this.min,
            max:_this.max
          })
          total+=Math.round(100-item.lastvalue)
        }
      });
      _this.loadingShow=false;
      let obj={value:Math.round(total/_this.cpuArrRepeat.length),index:_this.currentItemIndex}
      // _this.$store.dispatch('setDiskInfo',obj)
      _this.$store.commit("diskTotalChange",obj);
    },
    // 获取硬盘信息
    // getDiskInfo(){
    //   var _this=this;
    //   var data={
    //     "jsonrpc": "2.0",
    //     "method": "item.get",
    //     "params": {
    //         "output": "extend",
    //         "hostids": _this.hostId,
    //         "search": {
    //             "name":"disk"
    //         },
    //         "sortfield": "name"
    //     },
    //     "auth": localStorage.getItem('auth'),
    //     "id": 1
    //   }
    //   this.$http.post('/zabbix/api_jsonrpc.php',data).then(
    //     res=>{
    //       if(res.result){
    //         let total=0;
    //         _this.cpuArrRepeat=[]
    //         res.result.forEach((item,index )=> {
    //           let str=item.key_.match(/\[\/(\S*),pfree]/);
    //           if(str!=null){
    //             _this.cpuArrRepeat=_this.cpuArrRepeat.concat({
    //               title:str[1],
    //               percent:Math.round(100-item.lastvalue),
    //               min:_this.min,
    //               max:_this.max
    //             })
    //             total+=Math.round(100-item.lastvalue)
    //           }
    //         });
    //         _this.loadingShow=false;
    //         let obj={value:total/_this.cpuArrRepeat.length,index:_this.currentItemIndex}
    //         _this.$store.commit("diskTotalChange",obj);
    //       }
    //     },
    //     err=>{
    //       console.log(err);
    //     }
    //   )
    // },
    // 获取硬盘权重值
    getMaxMin(){
      var _this = this;
      var obj = {
        type: 'disk_min_max'
      };
      obj=JSON.stringify(obj)
      $.ajax({
        url:'http://192.168.96.9:9080/api/global_config',
        type:"post",
        contentType:"application/json",
        dataType:"json",
        data:obj,
        timeout:60000,
        success:(res)=>{
          _this.max=Number(res.info.max.replace(/%/, ""));
          _this.min=Number(res.info.min.replace(/%/, ""));
        },
        error:(err)=>{
          console.log(err)
        }
      })
    }
  }
};
</script>

<style scoped>
.memory-meter-container {
  width: 390px;
  height: 230px;
  border: 28px solid;
  border-top: 5px solid;
  border-left: 5px solid;
  background: transparent;
  border-image: url("../assets/images/22.png") 28 fill repeat;
  display: flex;
  justify-content: flex-start;
  margin-top: 60px;
}
.memory-meter-title {
  color:#fff;
  margin:10px;
  width:20px;
  font-size: 16px;
  /* font-weight: bold; */
}
.memory-meter-box{
  margin-top:32px;
  margin-left:16px;
  height:165px;
  overflow: hidden;
}
/*加载中的作用范围*/
.demo-spin-col{
  position: relative;
}
.ivu-spin-fix{
  background-color: rgba(0, 0, 0, .2);
}
.demo-spin-icon-load{
  animation: ani-demo-spin 1s linear infinite;
}
</style>
